<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card>
      <div>
        <el-input class="input" v-model="queryModel.query"></el-input>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="getuser()"
        ></el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible = true;
            ruleForm = {};
          "
          >添加用户</el-button
        >
      </div>

      <Table :cols="cols" :total="total" :data="list" v-model="queryModel">
        <template v-slot:state="{ row }">
          <el-switch
            @change="swithState(row)"
            v-model="row.mg_state"
          ></el-switch>
        </template>

        <template v-slot:action="{ row }">
          <el-button
            size="mini"
            type="primary"
            @click="
              dialogFormVisible = true;
              ruleForm = { ...row };
            "
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="deladd(row)"
            >删除</el-button
          >
          <el-button
            size="mini"
            type="info"
            @click="
              dialogFormVisible1 = true;
              getRoleList();
              ruleForm = { ...row };
            "
            >分配角色</el-button
          >
        </template>
      </Table>
    </el-card>

    <!-- 表单 -->
    {{ruleForm}}
    <el-dialog
      close-on-press-escape
      :title="title + '用户'"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="ruleForm">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="username">
            <el-input
              v-model="ruleForm.username"
              :disabled="!!ruleForm.id"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" v-if="!ruleForm.id">
            <el-input v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
        </el-form>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 分配权限 -->
    <el-dialog
      close-on-press-escape
      title="分配角色"
      :visible.sync="dialogFormVisible1"
    >
      <p>当前用户：{{ ruleForm.username }}</p>
      <p>当前用户：{{ ruleForm.role_name }}</p>
      <p>
        分配新角色
        <el-select v-model="auth">
          <el-option
            v-for="item in roles"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          ></el-option>
        </el-select>
      </p>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addRoles">确 定</el-button>
      </div>
    </el-dialog>

    <!-- <el-table :data="users" border style="100%">
      <el-table-column label="#" type="index"> </el-table-column>
      <el-table-column label="姓名" type="username" width="180"> </el-table-column>
      <el-table-column label="邮箱" type="email" width="180"> </el-table-column>
      <el-table-column label="电话" type="mobile" width="180"> </el-table-column>
      <el-table-column label="角色" type="role_name" width="180"> </el-table-column>
      <el-table-column label="状态" type="mg_state" width="180"> </el-table-column>
      <el-table-column label="操作" width="180"> </el-table-column>
    </el-table> -->

    <el-pagination
      @size-change="
        (v) => {
          queryModel.pagesize = v;
          getuser();
        }
      "
      @current-change="
        (v) => {
          queryModel.pagenum = v;
          getuser();
        }
      "
      :current-page="queryModel.pagenum"
      :page-sizes="[5, 10, 15, 20, 25, 30, 35, 40, 45, 50]"
      :page-size="queryModel.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { pageMixins } from "../mixins/baseMixins";
import {
  getUsers,
  addUser,
  updataList,
  deleList,
  changeState,
} from "../api/users.js";
import Table from "../components/Table.vue";
import { getRoles, updataRole } from "../api/roles";
export default {
  components: { Table },
  mixins: [pageMixins],
  data() {
    return {
      auth: "",
      dialogFormVisible1: false,
      //角色列表
      roles: [],
      ruleForm: {
        username: "",
        email: "",
        mobile: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        mobile: [{ required: true, message: "请输入电话", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      dialogFormVisible: false,
      list: [],
      //列
      cols: [
        {
          title: "#",
          type: "index",
        },
        {
          title: "姓名",
          name: "username",
        },
        {
          title: "邮箱",
          name: "email",
        },
        {
          title: "电话",
          name: "mobile",
        },
        {
          title: "角色",
          name: "role_name",
        },
        {
          title: "状态",
          slot: "state",
        },
        {
          title: "操作",
          slot: "action",
          width: 270,
        },
      ],
    };
  },
  created() {
    this.getuser();
  },
  computed: {
    title() {
      return this.ruleForm.id ? "修改" : "添加";
    },
  },
  methods: {
    //修改角色信息
   async addRoles() {
      try {
        this.$message.success('修改角色成功')
        this.dialogFormVisible1=false
      } catch (error) {
        
      }
    },
    //角色信息
    async getRoleList() {
      try {
        const res = await getRoles();
        this.roles = res.data;
        console.log(this.roles, "js");
      } catch (error) {}
    },
    //更改状态
    async swithState({ id, mg_state }) {
      try {
        await changeState(id, mg_state);
        this.$message.success("设置状态成功");
        this.getusers();
      } catch (error) {}
    },
    //删除
    async deladd(row) {
      try {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            console.log(row);
            const res = await deleList(row.id);
            if (res.meta.status == 200) {
              this.$message.success("删除成功");
              this.getuser();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } catch (error) {}
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert('submit!');
          try {
            await (this.ruleForm.id ? updataList : addUser)(this.ruleForm);
            this.$message.success(this.title + "成功");
            this.dialogFormVisible = false;
            this.getuser();
          } catch (error) {
            console.log(error);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    async getuser() {
      try {
        const res = await getUsers(this.queryModel);
        this.list = res.data.users;
        this.total = res.data.total;
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped>
.el-card {
  margin-top: 20px;
  
}
.input {
  width: 400px;
}
</style>